<template>
  <div class="pointer-events-test-event" style="overflow:auto">
    <h1>{{ message }}</h1>
    <h2>pointer-events CSS 属性</h2>
    <p>pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。</p>
    <h3>可选值如下</h3>
    <ol>
        <li>auto</li>
        <li>none</li>
        <li><span>visiblePainted</span> /* SVG only */</li>
        <li><span>visibleFill</span> /* SVG only */</li>
        <li><span>visibleStroke</span> /* SVG only */</li>
        <li><span>visible</span> /* SVG only */</li>
        <li><span>painted</span> /* SVG only */</li>
        <li><span>fill</span> /* SVG only */</li>
        <li><span>stroke</span> /* SVG only */</li>
        <li><span>all</span> /* SVG only */</li>
    </ol>
    <p>其中只有auto、none对非svg元素起作用，默认值时auto</p>
    <section>
        <h3>pointer-events: none;该元素不会成为鼠标事件的target</h3>
        <div class="flex">
            <div class="left">
                <div class="children1" @click="test1()">
                    我是div1有pointer-events: none;并且我绑了click事件
                </div>
                <div class="children2" @click="test2()">
                    我是div2，绑了click事件
                </div>
            </div><div class="right">
                <p>打开F12 去掉div1 的 pointer-events: none; 做对比</p>
                你点击了div1 {{test6Str}} 次
                <br>
                你点击了div2 {{test7Str}} 次
            </div>
        </div>
    </section>
    <section>
        <h3>父级元素 设置pointer-events: none;子元素div3设置pointer-events: auto;</h3>
        <div class="flex test-child">
            <div class="left">
                <div class="children11" @click="test3()">
                    我是div1
                    <div class="children12" @click="test4()">
                        我是div2
                        <br>
                        <div class="children13 btn" @click="test5()">
                           我是div3 
                        </div>
                    </div>
                </div>
            </div><div class="right">
                <p>打开F12 去掉div1 的 pointer-events: none; 做对比</p>
                你点击了div1 {{test3Str}} 次
                <br>
                你点击了div2 {{test4Str}} 次
                <br>
                你点击了div3 {{test5Str}} 次
            </div>
        </div>
    </section>
    <section>
        <h3>兄弟元素，div2高层级设置pointer-events: none;</h3>
        <div class="flex test-child">
            <div class="left">
                <div class="children111" @click="test6()">
                    我是div1
                </div>
                <div class="children112" @click="test7()">
                    我是div2,我浮动在div1上面
                </div>
            </div><div class="right">
                <p>打开F12 去掉div1 的 pointer-events: none; 做对比</p>
                你点击了div1 {{test6Str}} 次
                <br>
                你点击了div2 {{test7Str}} 次
            </div>
        </div>
    </section>
    <p>总结：pointer-events会被子元素继承，只能阻止其成为鼠标或者touch的target,对于冒泡到该元素的事件还是会被执行，可手动在子元素禁止冒泡。兄弟元素高层级设置为none,会被击穿，直接认为被挡住的元素是目标DOM，触发对应的事件。</p>
    <!-- <p>visiblePainted 值类似于 auto，作用于svg的可见部分，即：非none部分</p>
    <section>
        <svg style="pointer-events:visiblePointed;">
            <circle cx="30" cy="30" r="20" stroke="#1ee4b2" stroke-width="10"
                fill="#54c1ff" onclick="alert('circle')" />
        </svg> 
        <svg style="pointer-events:visiblePointed;">
            <circle cx="30" cy="30" r="20" stroke="#1ee4b2" stroke-width="10"
                fill="none" onclick="alert('circle')" />
        </svg> 
        <svg style="pointer-events:visibleFill;">
            <circle cx="30" cy="30" r="20" stroke="#1ee4b2" stroke-width="10"
                fill="none" onclick="alert('circle')" />
        </svg> 
    </section> -->
    <p class="page-end">The End</p>
  </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Component from 'vue-class-component';

    @Component({
        // 所有的组件选项都可以放在这里
    })
    export default class pointerEvents extends Vue {
        // data 在这
        message: string = 'css的点透属性（pointer-events）'

        test1Str: number = 0
        test1 (): void {
            this.test1Str += 1;
        }

        test2Str: number = 0
        test2 (): void {
            this.test2Str += 1;
        }

        test3Str: number = 0
        test3 (): void {
            this.test3Str += 1;
        }

        test4Str: number = 0
        test4 (): void {
            this.test4Str += 1;
        }

        test5Str: number = 0
        test5 (): void {
            this.test5Str += 1;
        }

        test6Str: number = 0
        test6 (): void {
            this.test6Str += 1;
        }

        test7Str: number = 0
        test7 (): void {
            this.test7Str += 1;
        }
    }
</script>
<style lang="scss">
.pointer-events-test-event{
    ol{
        li{
            span{
                display: inline-block;
                width: 110px;
                vertical-align: middle;
            }
        }
    }
    .left{
        background: #54c1ff;
        opacity: .4;
        border-radius: 4px;
        padding: 40px;
        box-sizing: border-box;
        position: relative;
        >div{
            text-align: center;
            padding: 30px;
            box-sizing: border-box;
        }
        .children1{
            width: 100%;
            height: 50%;
            border-radius: 4px;
            background: #1ee4b2;
            pointer-events: none;
        }
        .children2{
            width: 100%;
            height: 50%;
            border-radius: 4px;
            background: #c6e41e;
        }
    }
    .right {
        padding: 20px;
        box-sizing: border-box;
    }
    .test-child{
        .children11{
            width: 100%;
            height: 100%;
            border-radius: 4px;
            background: #1ee4b2;
            pointer-events: none;
            .children12{
                width: 100%;
                height: 100%;
                border-radius: 4px;
                background: #c6e41e;
                .children13{
                    pointer-events: auto;
                }
            }
        }
    }
    .children111{
        width: 100%;
        height: 100%;
        border-radius: 4px;
        // background: #1ee4b2;
    }
    .children112{
        position: absolute;
        top:0;
        left: 0;
        z-index: 9999;
        width: 100%;
        height: 100%;
        border-radius: 4px;
        background: #1ee4b2;
        opacity: .7;
        pointer-events: none;
    }
    svg{
        width: 70px;
        height: 70px;
    }
}
</style>